<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Category>
        <template v-slot:content>
          <ul>
            <li v-for="g in games" :key="g.id">
              {{ g.name }}
            </li>
          </ul>
        </template>
        <template v-slot:title>
          <h2>热门游戏列表</h2>
        </template>
      </Category>
      <Category>
        <template v-slot:content>
          <img :src="imgUrl" />
        </template>
        <template v-slot:title>
          <h2>今日美食城市</h2>
        </template>
      </Category>
      <Category>
        <!-- v-solt 的语法糖,直接用#代替 -->
        <template #content>
          <video :src="videoUrl" controls></video>
        </template>
        <template #title>
          <h2>今日影视推荐</h2>
        </template>
      </Category>
    </div>
  </div>
</template>

<!--具名插槽,就是具有名字的插槽,默认插槽其实是有名字的,就叫default-->
<script setup lang="ts" name="Father">
import Category from './Category.vue';
import { ref, reactive } from 'vue';

let games = reactive([
  { id: 1, name: '英雄联盟' },
  { id: 2, name: '王者荣耀' },
  { id: 3, name: '星际争霸' },
  { id: 4, name: '红色警戒' },
])
let imgUrl = ref("https://media.istockphoto.com/id/510901343/photo/chengdu-china-on-the-jin-river.jpg?s=1024x1024&w=is&k=20&c=nVLySwNe4WIcid5ALD74nPmSzVcprJFjekfVlCrjFE8=")
let videoUrl = ref("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4")
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}

.content {
  display: flex;
  justify-content: space-evenly;
}

img,
video {
  width: 100%;
}
</style>